<template>
  <Card style="width: 100%" title="项目登记">

    <Form
      name="user"
      ref="formRef"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      @finish="formFinish"
      :initialValues="{}">

      <Row>
        <Col :span="8">
          <FormItem name="itemName" label="项目名称" initialValue="">
            <Input placeholder="请输入项目名称" style="width: 100%" allowClear/>
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem name="itemDegree" label="项目密级" initialValue="" all>
            <Select placeholder="资源类型" style="width: 100%" allowClear>
              <Option v-for="dict in dict.type.resource_type" :key="dict.value" :label="dict.label" :value="dict.value"></Option>
            </Select>
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem name="fatoryName" label="委托单位" initialValue="">
            <Input placeholder="请输入委托单位" style="width: 100%" allowClear/>
          </FormItem>
        </Col>
      </Row>
      <Row>
         <Col :span="8">
          <FormItem name="dbType" label="源库类型">
            <Input placeholder="请输入源库类型" style="width: 100%" allowClear />
          </FormItem>
        </Col>
        <!-- <Col :span="8">
          <FormItem name="groupName" label="业务系统名称">
            <Input placeholder="请输入业务系统名称" style="width: 100%" />
          </FormItem>
        </Col> -->
        <Col :span="5" :offset="11">
          <Button type="primary" @click="handleQuery">
            <Icon name="search" style="margin-top: 3px; margin-right: 5px;" /> 查 询
          </Button>
          <Button style="margin-left: 10px" @click="formReset">
            <Icon name="rollback-outline" style="margin-top: 3px; margin-right: 5px;" /> 重 置
          </Button>
          <!-- <a href="#" style="color: #b30000">更多 <Icon name="down" style="vertical-align: middle" /></a> -->
        </Col>
      </Row>
    </Form>

    <!-- 分割线 -->
    <Divider />

    <Button type="primary" style="margin-right: 10px; margin-bottom: 20px" size="md" @click="clickAdd">
      <Icon name="add"/> 新增
    </Button>

    <Skeleton :loading="loading" :avatar="false" active :paragraph="{ rows: 6 }">
      <Table
        :columns="columns"
        :dataSource="dataList"
        :bordered="false"
        @change="handleTableChange"
        :pagination="{
          total: total,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSize: queryParams.pageSize,
          current: queryParams.pageNum,
        }">
        <template #render="render">
          <div v-if="render.dataIndex == 'resourceType'">
          <dict-tag :options="dict.type.resource_type" :value="render.record.resourceType"/>
          </div>
          <div v-else-if="render.dataIndex == 'operation'">
            <a href="#" @click.prevent="tblOptForm(render.record)">
              <Icon name="edit" style="margin-top: 4px;" /> 编辑
            </a>
            <a href="#" @click.prevent="deleteClick(render.record.itemId)">
              <Icon name="delete-can" style="margin-top: 4px;" /> 删除
            </a>
          </div>
        </template>
        <template #paginationTotal="props">
          <span>总共{{ props.total }} 条</span>
        </template>
      </Table>
    </Skeleton>

     <!-- 表单页对话框 -->
    <Modal
      class="fromModal"
      v-if="formDialogInfo.visible"
      :title="formDialogInfo.title"
      v-model="formDialogInfo.visible"
      @cancel="formDialogInfo.visible = false"
      width="1000px"
      :bodyStyle="{ padding: '0px' }"
      :footer="[null]">

      <modal-form :key="Date.now()" :id="formDialogInfo.id" :currentRow="formDialogInfo.currentRow" @handleCancel="formDialogCancel"></modal-form>
    </Modal>
  </Card>
</template>

<script>
import { listItem, getItem, delItem, addItem, updateItem } from "@/api/doitem/item";
import {getCurrentTime} from "@/utils/ruoyi";
import ModalForm from "./components/ModalFormStand";
import { Message, Modal } from "@uni/vue";
export default {
  dicts: ['item_type', 'db_type', 'item_degree', 'db_libraries', 'client_nature'],
  components: {
    "modal-form": ModalForm,
  },
  data() {
    return {
      loading: true,
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      dataList: [],
      columns: [
        { title: "序号", align: "center", dataIndex: "itemId", key: "itemId" },
        { title: "项目编号", align: "center", dataIndex: "itemNumber", key: "itemNumber" },
        { title: "项目金额", align: "center", dataIndex: "itemCost", key: "itemCost" },
        { title: "项目名称", align: "center", dataIndex: "itemName", key: "itemName" },
        { title: "委托单位", align: "center", dataIndex: "client", key: "client" },
        { title: "委托单位性质", align: "center", dataIndex: "clientNature", key: "clientNature" },
        { title: "项目类型", align: "center", dataIndex: "itemType", key: "itemType" },
        { title: "项目密级", align: "center", dataIndex: "itemDegree", key: "itemDegree" },
        { title: "源库类型", align: "center", dataIndex: "dbType", key: "dbType" },
        { title: "项目预期工期", align: "center", dataIndex: "schedule", key: "schedule" },
        { title: "操作", align: "center", dataIndex: "operation", key: "operation" },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        itemName: null,
        itemDegree: null,
        fatoryName: null,
        dbType: null
      },
      total: 0,
      formDialogInfo: {
        title: "",
        visible: false,
        id: "",
        currentRow: {},
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async clickAdd() {
      (
        this.formDialogInfo = {
          title: "添加项目",
          visible: false,
          id: "",
          currentRow: {},
        }
      ),
      (this.formDialogInfo.visible = true);
    },
    tblOptForm(row) {
      this.formDialogInfo.title = "修改项目";
      this.formDialogInfo.id = row.itemId;
      this.formDialogInfo.currentRow = row;
      this.formDialogInfo.visible = true;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$refs.formRef.submit();
    },
    formFinish(formValues) {
      this.queryParams = {
        pageNum: 1,
        pageSize: 5,
        itemName: formValues.itemName,
        itemDegree: formValues.itemDegree,
        fatoryName: formValues.fatoryName,
        dbType: formValues.dbType,
      };
      this.getList();
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      listItem(this.queryParams).then((response) => {
        if (response.code == 200) {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        } else {
          Message.error({ text: "获取信息失败：" + response.msg });
        }
      });
    },
    handleTableChange(p, filters) {
      const { current, pageSize } = p;
      this.queryParams.pageNum = current;
      this.queryParams.pageSize = pageSize;
      this.getList();
    },
    formReset(value) {
      this.$refs.formRef.reset();
    },
    formDialogCancel() {
      this.formDialogInfo.visible = false;
      this.getList()
    },
    // 角色状态修改
    handleStatusChange(row) {
      let text = row.status === "0" ? "停用" : "启用";
      Modal.confirm({
        title: "改变状态？",
        content: '确认要"' + text + '""' + row.userName + '"用户吗？',
        onOk: () => {
          row.status = row.status === "0" ? "1" : "0";
          changeUserStatus(row.userId, row.status).then(
            () => {
              Message.success({ text: text + "成功" });
              this.getList();
              
            }).catch(function () {
              row.status = row.status === "0" ? "1" : "0";
            });
        },
        onCancel: () => {},
      });
    },
    /** 删除按钮操作 */
    deleteClick(id) {
      Modal.confirm({
        title: "确认删除？",
        content: '是否确认删除硬件资源编号为"' + id + '"的数据项？',
        onOk: () => {
          delItem(id).then(() => {
            this.getList();
            Message.success({ text: "删除成功" });
          });
        },
        onCancel: () => {},
      });
    },
  },
};
</script>

<style scoped lang="scss">
/* 弹框区 */
::v-deep
  .fromModal
  > .uni-modal-wrap
  > .uni-modal-wrap-content
  > .uni-modal-footer {
  padding: 0;
}
</style>
